<template>
	<div class="color333">
		<div class="bgWhite radius8">
			<div>
				<span class="fb fs18 mr20 color333">订单编号：{{form.orderNumber}}</span>
				<span class="fs14">业务经理：</span><span class="color2 fs14">{{form.businessManager}}</span>
			</div>
			<div class="flex col-top mt30">
				<div class="mr20  flex col-center">
					<div class="fs14 color2">订单状态：</div>
					<div class="fs14 flex col-center">
						<div :class="activeStatus(form.orderStatus)"><span class="drop"></span></div>
						<dict-tag :options="bus_order_status" :value="form.orderStatus" />
					</div>
				</div>
				<div class="flex col-center">
					<div class="fs14 color2">订单金额：</div>
					<div class="fs14">¥{{form.orderTotalAmount}}</div>
				</div>
			</div>
			<div class="mt20 pl20">
				<div>
					<div class="w-250 disInBlock">
						<span class="fb">客户姓名：</span>
						<span class="color2">{{form.customerName}}</span>
					</div>
					<div class="w-250 disInBlock ml30">
						<span class="fb">客户手机号：</span>
						<span class="color2">{{form.customerPhone}}</span>
					</div>
				</div>
				<div class="mt15">
					<div class="w-250 disInBlock">
						<div class=" flex col-center">
							<span class="fb">客户类型：</span>
							<span class="color2">
								<dict-tag :options="bus_customer_type" :value="form.customerType" />
							</span>
						</div>
					</div>
					<div class="w-250 disInBlock ml30">
						<span class="fb">收货人：</span>
						<span class="color2">{{form.recipient}}</span>
					</div>
				</div>
				<div class="mt15">
					<div class="w-250 disInBlock">
						<span class="fb">收货人手机号：</span>
						<span class="color2">
							{{form.recipientPhone}}
						</span>
					</div>
					<div class="w-250 disInBlock ml30">
						<span class="fb">收货地址：</span>
						<span class="color2">{{form.shippingAddress}}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="bgWhite radius8 mt30">
			<div class="plr20 ">
				<div class="fb fs16 pt20 pb20">
					基本信息
				</div>
				<el-table v-loading="loading" :data="list" style="width: 100%;position:relative;z-index: 1;" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }">
					<el-table-column label="订单来源" align="center" prop="orderSource">
						<template v-slot="scope">
							<dict-tag :options="bus_source" :value="form.orderSource" />
						</template>
					</el-table-column>
					<el-table-column label="付款类型" align="center" prop="paymentType">
						<template v-slot="scope">
							<dict-tag :options="bus_pay_type" :value="form.paymentType" />
						</template>
					</el-table-column>
					<el-table-column label="支付方式" align="center" prop="paymentMethod">
						<template v-slot="scope">
							<dict-tag :options="bus_pay_status" :value="form.paymentMethod" />
						</template>
					</el-table-column>
					<el-table-column label="配送方式" align="center" prop="logisticsId">
						<template v-slot="scope">
							<span>{{form.logistics}}</span>
							<!-- <dict-tag :options="bus_logistics_type" :value="form.logisticsId" /> -->
						</template>
					</el-table-column>
					<el-table-column label="付款截图" align="center" prop="paymentMethod">
						<template v-slot="scope">
							 <el-image 
							   v-if="form.paymentUrl"
							    style="width: 50px; height: 50px"
							    :src="form.paymentUrl" 
							    :preview-src-list="[form.paymentUrl]">
							  </el-image>
							<!-- <img class="cursor" v-if="form.paymentUrl" style="width: 50px;height: 50px;" :src="form.paymentUrl" alt="" /> -->
						</template>
					</el-table-column>
				</el-table>
				<el-table v-loading="loading" :data="list" style="width: 100%;position:relative;z-index: 0;" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }">
					<el-table-column label="订单金额" align="center" prop="id">
						<template v-slot="scope">
							￥{{form.orderTotalAmount}}
						</template>
					</el-table-column>
					<el-table-column label="差额" align="center" prop="differenceAmount">
						<template v-slot="scope">
							￥{{form.differenceAmount}}
						</template>
					</el-table-column>
					<el-table-column label="回款金额" align="center" prop="receivedAmount">
						<template v-slot="scope">
							￥{{form.receivedAmount}}
						</template>
					</el-table-column>
					<el-table-column label="未付款金额" align="center" prop="weifukuan">
						<template v-slot="scope">
							￥{{form.weifukuan}}
						</template>
					</el-table-column>
					<el-table-column label="已付款金额" align="center" prop="yifukuan">
						<template v-slot="scope">
							￥{{form.yifukuan}}
						</template>
					</el-table-column>
				</el-table>
				<div class="mt30">
					<el-table v-loading="loading" :data="form.commodityList" style="width: 100%;position: relative;z-index: 0;" :header-row-style="{
							background: '#FAFAFA',
							color: '#0C1019',
							height: '54px',
						  }" :cell-style="{ height: '54px' }"
						  height="350px"
						  >
						<el-table-column label="商品图片" align="center" prop="mainImageUrl">
							<template v-slot="scope">
								<div class="relative" style="width: 90px;margin: 0 auto;">
									<img :src="scope.row.mainImageUrl ? scope.row.mainImageUrl : defaultImg" alt="" class="radius8" width="90" height="90" />
									<img v-if="scope.row.type == 1" class="gift" src="/src/assets/images/gift.png" alt="" />
								</div>
							</template>
						</el-table-column>
						<el-table-column label="商品名称" align="center" prop="commodityName">
							<template v-slot="scope">
								{{scope.row.commodityName}}
							</template>
						</el-table-column>						
						<el-table-column label="商品编号" align="center" prop="commodityCode" />
						<!-- <el-table-column align="center" prop="specificationId" label="商品规格">
							<template v-slot="scope">
								<dict-tag :options="bus_product_specification_unit"
									:value="scope.row.specificationId" />
							</template>
						</el-table-column> -->
						<el-table-column label="最小数量" align="center" prop="paymentMethod">
							<template v-slot="scope">
								{{scope.row.quantity}}
							</template>
						</el-table-column>
						<el-table-column label="价格" align="center" prop="onlineUnitPrice">
							<template v-slot="scope">
								{{scope.row.unitPrice}}
							</template>
						</el-table-column>
						<el-table-column label="箱数量" align="center">
							<template v-slot="scope">
								{{scope.row.numberOfShippingBoxes}}
							</template>
						</el-table-column>
						<el-table-column label="箱价" align="center">
							<template v-slot="scope">
								{{scope.row.caseUnitPrice}}
							</template>
						</el-table-column>
						<el-table-column label="小计" align="center">
							<template v-slot="scope">
								{{scope.row.subtotal}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="mt20 pb10">
					<el-form-item label="发货备注：" prop="remark" label-width="110">
						<el-input size="large" disabled type="textarea" v-model="form.deliverGoodsRemark" resize="none" class="textReset" :rows="2"
							placeholder="请输入" />
					</el-form-item>
					<el-form-item label="收款备注：" prop="remark" label-width="110">
						<el-input size="large" disabled v-model="form.remark" type="textarea" resize="none" class="textReset" :rows="2"
							placeholder="请输入" />
					</el-form-item>
				</div>
			</div>
			<!-- 1010 已发货/全部订单查看 -->
			<div class="plr20" v-if="type == 1 || form.orderStatus == '1010'">
				<div class="fb fs16 pt20 pb20">
					回款信息
				</div>
				<div class="">
					<el-table v-loading="loading" :data="list1" style="width: 100%" :header-row-style="{
							background: '#FAFAFA',
							color: '#0C1019',
							height: '54px',
						  }" :cell-style="{ height: '54px' }">
						<el-table-column label="回款日期" align="center" prop="paymentDate" />
						<el-table-column label="回款单号" align="center" prop="id" />
						<el-table-column label="回款金额" align="center" prop="paymentAmount" />
						<el-table-column label="付款方式" align="center" prop="orderStatus">
							<template v-slot="scope">
								<dict-tag :options="bus_pay_status" :value="scope.row.paymentMethod" />
							</template>
						</el-table-column>
						<el-table-column label="付款截图" align="center" prop="orderStatus">
							<template v-slot="scope">
								<img width="80" height="80" class="radius8" :src="scope.row.paymentScreenshot" alt="" />
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" align="center" width="300">
							<template v-slot="scope">
								<el-button size="mini" type="text" @click="handleReceivedDetail(scope.row)">
									查看详情
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<pagination v-show="total1 > 0" :total="total1" v-model:page="queryParams1.pageNum"
						v-model:limit="queryParams1.pageSize" @pagination="getList" />
				</div>
			</div>
			<div class="plr20 mb30" v-if="type == 1 || form.orderStatus == '1010'">
				<div class="fb fs16 pt20 pb20">
					发货信息
				</div>
				<div class="">
					<div class="bgHeader">
						<el-row>
							<el-col :span="2">
								包裹
							</el-col>
							<el-col :span="3">
								商品编码
							</el-col>
							<el-col :span="4">
								商品名称
							</el-col>
							<el-col :span="3">
								商品数量
							</el-col>
							<el-col :span="3">
								公司名称
							</el-col>
							<el-col :span="3">
								物流费用
							</el-col>
							<el-col :span="3">
								发货单号
							</el-col>
							<el-col :span="3">
								物流电话
							</el-col>
						</el-row>
					</div>
					<el-scrollbar style="max-height:450px;overflow-y: scroll;" v-if="form.yyLogisticsInformation">
						<div style="display: flex;" v-for="(itemArr,index) in form.yyLogisticsInformation" :key="index">
							<div class="border-bottom text-center border-left pt10 pb10 flex col-center row-center" style="width: 92px;">
								{{index+1}}
							</div>
							<div style="display: inline-block;">
								<div class="flex col-center" style="width: 470px;" v-for="(item,key) in itemArr.wuliushangpin" :key="key">
									<div class="border-bottom text-center border-left pt10 pb10 logMes">
										{{item.shangpinbianma}}
									</div>
									<div :span="3" class="border-bottom text-center border-left pt10 pb10 logMes" style="width: 190px;">
										{{item.shangpinming}}
									</div>
									<div :span="3" class="border-bottom text-center border-left pt10 pb10 logMes">
										{{item.shangpinshuliang}}
									</div>
								</div>
							</div>
								<div :span="3" class="border-bottom text-center border-left pt10 pb10 flex col-center row-center " style="width: 140px;">
									{{itemArr.wuliugongsi}}
								</div>
								<div :span="3" class="border-bottom text-center border-left pt10 pb10 flex col-center row-center" style="width: 140px;">
									{{itemArr.wuliufeiyong}}
								</div>
								<div :span="3" class="border-bottom text-center border-left pt10 pb10 flex col-center row-center" style="width: 140px;">
									{{itemArr.wuliudanhao}}
								</div>
								<div :span="3" class="border-bottom border-right text-center border-left pt10 pb10 flex col-center row-center" style="width: 140px;">
									{{itemArr.wuliudianhua}}
								</div>
						</div>
					</el-scrollbar>
					<div v-else class="text-center" style="color: #909399;line-height: 60px;border-bottom: 1px solid #ebeef5;">
						暂无数据 
					</div>
				</div>
			</div>
			<div class="pl20" style="color:  red;" v-if="form.isGrossProfitMarginShow">
				<span>毛利率：</span><span>{{form.orderGrossProfitRate}}%</span>
			</div>
			<!-- <div class="plr20">
				<div class="fb fs16 pt20 pb20">
					操作记录
				</div>
				<div>
					<el-table v-loading="loading" :data="logList" style="width: 100%" :header-row-style="{
							background: '#FAFAFA',
							color: '#0C1019',
							height: '54px',
						  }" :cell-style="{ height: '54px' }">
						<el-table-column label="时间" align="center" prop="time"/>
						<el-table-column label="节点" align="center" prop="customerName">
							<template v-slot="scope">
								{{scope.row.node}}
							</template>
						</el-table-column>
						<el-table-column label="操作人" align="center" prop="orderStatus">
							<template v-slot="scope">
								{{scope.row.operator}}
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" prop="operationContent" />
						<el-table-column label="操作结果" align="center" prop="operationResult"/>
					</el-table>
					<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
						v-model:limit="queryParams.pageSize" @pagination="getList" />
				</div>
			</div> -->
		</div>
		<!-- <returnMoney></returnMoney> -->
		<!-- 结束订单绝弹窗 -->
		<!-- <errorPop ref="error" :item="propItem" :type="0" :id="form.id" @refresh="getDetail"></errorPop> -->
	</div>
</template>

<script>
	import {
		orderDetail, //详情
		orderNumberDetail,//根据订单号查详情
		orderAdd,//提交订单
	} from "@/api/business/order";
	// import returnMoney from './returnMoney.vue' //回款信息弹窗
	import {
		receivedList, //回款列表
	} from "@/api/business/received";
	// import progressGroup from '@/components/Progress/index.vue'//进度条
	// import errorPop from './error.vue'//审核拒绝弹窗
	export default {
		components: {
			// returnMoney,
			// progressGroup,
			// errorPop
		},
		props:{
			orderNo:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				bus_customer_type:this.useDict('bus_customer_type').bus_customer_type,//客户类型
				bus_order_status: this.useDict('bus_order_status').bus_order_status, //订单状态
				bus_source: this.useDict('bus_source').bus_source, //订单来源
				bus_pay_type: this.useDict('bus_pay_type').bus_pay_type, //付款类型
				bus_pay_status: this.useDict('bus_pay_status').bus_pay_status, //付款方式	
				// bus_logistics_type: this.useDict('bus_logistics_type').bus_logistics_type,
				bus_product_specification_unit: this.useDict('bus_product_specification_unit')
					.bus_product_specification_unit, //规格	
				list: [{}],
				form: {
					id: ''
				},
				loading: true, // 遮罩层
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderNumber: '',
				},//操作日志
				total: 0,//操作日志
				type: 1, //0:我的订单-查看详情 1：全部订单-查看详情
				queryParams1: {
					pageNum: 1,
					pageSize: 5,
					relatedOrder: '',
				}, //回款列表
				list1: [] ,//回款列表
				total1:0,//回款列表
				propItem:'',
				goodsList:[],//发货信息
			}
		},
		watch:{
			orderNo:{
				handler(val) {
					console.log(val,'val=====')
					if (val) {
						this.form.orderNumber = val
						this.getDetail()
					} 
				},
				deep: true, immediate: true
			},
		},
		// created() {
		// 	this.type = this.$route.query.type ? this.$route.query.type : 0
		// 	this.form.orderNumber = this.$route.query.orderNumber ? this.$route.query.orderNumber : ''
		// 	this.getDetail()
		// },
		methods: {
			//结束订单
			handleError(){
				this.$refs.error.open()
			},
			getDetail() {
				orderNumberDetail(this.form.orderNumber).then(res => {
					this.form = res.data			
					this.getReceivedList()
				})
			},
			//回款列表
			getReceivedList() {
				this.queryParams1.relatedOrder = this.form.orderNumber
				receivedList(this.queryParams1).then((response) => {
					this.list1 = response.rows;
					this.total1 = response.total
					this.loading = false
				})
			},
			//回款详情
			handleReceivedDetail(row){
				this.$router.push('/payment/receivedDetail?id='+row.id)
			},
		}
	}
</script>

<style>
	​
	.w-250{
		width: 250px;
	}
	.gift{
		position: absolute;
		width: 32px;
		left: 0;
		top:0;
	}
	.bgHeader{
		background: #FAFAFA;
		color: #515a6e;
		height: 54px;
		font-weight: bold;
		text-align: center;
		line-height: 54px;
	}
	.logMes {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140px;
		vertical-align: middle;
		height: 100px;
	}
	.el-table__inner-wrapper::before{
		z-index: 0;
	}
</style>